<template>
    <div class="commodity-flow-info">
        <el-dialog
            :visible.sync="dialogVisible"
            width="50%"
            :show-close="false"
        >
            <div slot="title" class="dialog-title">
                <div class="left-but">
                    <i
                        v-show="is_show_custom"
                        class="el-icon-arrow-left"
                        @click="is_show_custom = false"
                    ></i>
                </div>
                <div class="title-box">
                    <span>流水详情</span>
                </div>

                <div class="right-but">
                    <i
                        class="el-icon-close"
                        @click="dialogVisible = false"
                    ></i>
                </div>
            </div>
            <div class="commodity-info">
                <div class="good-info">
                    <div class="good-img">
                        <img
                            :src="
                                goodInfo.goods_img_small
                                    ? goodInfo.goods_img_small
                                    : img_buf
                            "
                        />
                    </div>
                    <div class="good-content">
                        <div class="good-title">
                            <span>{{ goodInfo.goods_name }}</span>
                        </div>
                        <div class="good-txt" v-show="is_show_custom">
                            <span>{{runningData.spec_name}}</span>
                        </div>
                        <div class="good-txt" v-show="!is_show_custom">
                            <span>{{
                                `${
                                    goodInfo.brands_name
                                        ? goodInfo.brands_name + "|"
                                        : ""
                                }${
                                    goodInfo.category_name
                                        ? goodInfo.category_name + "|"
                                        : ""
                                }${goodInfo.item_no ? goodInfo.item_no : ""}`
                            }}</span>
                        </div>
                        <div class="good-pic" v-show="!is_show_custom">
                            <span class="pic">{{ goodInfo.cost }}</span>
                            <span>{{ goodInfo.qty_min }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="commodity-content" v-show="!is_show_custom">
                <div
                    class="commodity-list comm-list"
                    v-infinite-scroll="loadFun"
                >
                    <div
                        class="commodity-row"
                        v-for="(item, index) in runningList"
                        :key="index"
                    >
                        <div class="tiem-box">{{ item.time }}</div>
                        <div
                            class="spac-box"
                            v-for="(items, indexs) in item.list"
                            :key="indexs"
                            @click="getDetailsFun(items)"
                        >
                            <span>{{ items.spec_title }}</span>
                            <span>{{ items.qty_min }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="commodity-content" v-show="is_show_custom">
                <div class="costom-row">
                    <div class="costom-info">
                        <div class="title">流水类型</div>
                        <div class="data">{{ runningData.act_txt }}</div>
                    </div>
                    <div class="costom-info">
                        <div class="title">发生数量</div>
                        <div
                            class="data"
                            :class="
                                Number(runningData.qty_min) > 0
                                    ? 'color-g'
                                    : 'color-r'
                            "
                        >
                            {{ runningData.qty_min }}
                        </div>
                    </div>
                    <div class="costom-info">
                        <div class="title">发生金额</div>
                        <div class="data">{{ runningData.amount }}</div>
                    </div>
                    <div class="costom-info">
                        <div class="title">发生时间</div>
                        <div class="data">{{ runningData.atime_txt }}</div>
                    </div>
                    <div class="costom-info">
                        <div class="title">经手人</div>
                        <div class="data">{{ runningData.uid_cp_name }}</div>
                    </div>
                    <div class="costom-info">
                        <div class="title">相关单号</div>
                        <div class="data">
                            {{
                                runningData.odno ? runningData.odno : "暂无单号"
                            }}
                        </div>
                    </div>
                    <div class="costom-info" v-if="runningData.txt">
                        <div class="title">备注说明</div>
                        <div class="data">{{ runningData.txt }}</div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import staticConst from "@/js/const/StaticConst.js";

import config from "@/js/conf/Config.js";

export default {
    name: "commodityFlowInfo",
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            dialogVisible: false,
            is_show_custom: false,
            is_soll: false,
            pfrom: 0,
            goodInfo: {},
            runningList: [],
            runningData: {},
            paramData: {},
        };
    },
    methods: {
        initData(data) {
            this.paramData = data;
            this.emptyData();
            this.getListFun();
        },
        // 滚动加载
        loadFun() {
            if (this.is_soll) return;
            this.pfrom += 20;
            this.getListFun();
        },
        // 获取列表
        async getListFun() {
            let url = config.REPORT_STORE_IN_OUT_DETAIL;
            let param = this.paramData;
            param.pfrom = this.pfrom;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.list) {
                this.runningList = this.runningList.concat(res.data.list);
                this.dialogVisible = true;
            } else {
                this.is_soll = true;
            }
            if (res.status == 1 && res.data.info) {
                this.goodInfo = res.data.info;
            }
        },
        // 获取详情
        async getDetailsFun(item) {
            console.log(item);
            let url = config.REPORT_GOODS_STORE_LOG_DETAIL;
            let param = {
                log_id: item.log_id,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.is_show_custom = true;
                this.runningData = res.data;
            }
        },
        // 清空
        emptyData() {
            this.is_show_custom = false;
            this.pfrom = 0;
            this.is_soll = false;
            this.runningList = [];
        },
    },
};
</script>
<style lang="scss" scoped>
.commodity-flow-info {
    .commodity-info {
        .good-info {
            display: flex;
            .good-img {
                margin-right: 10px;
                width: 80px;
                height: 80px;
                border-radius: 5px;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .good-content {
                width: calc(100% - 80px);
                .good-title {
                    font-size: 14px;
                }
                .good-txt {
                    margin-top: 5px;
                    font-size: 12px;
                    color: #9fa0a8;
                }
                .good-pic {
                    margin-top: 5px;
                    font-size: 12px;
                    display: flex;
                    justify-content: space-between;
                    .pic {
                        color: #fa4d4d;
                        font-size: 14px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
    .commodity-content {
        margin-top: 10px;
        .commodity-list {
            height: 400px;
            overflow: auto;
            .commodity-row {
                .tiem-box {
                    padding: 5px 10px;
                    background: #f2f2f2;
                    display: flex;
                    align-items: center;
                }
                .spac-box {
                    padding: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-bottom: 1px solid #f4f4f4;
                    cursor: pointer;
                    &:hover {
                        background: #fafafa;
                    }
                    &:last-child {
                        border: none;
                    }
                }
            }
        }
        .sale-body {
        }
        .costom-row {
            border-bottom: 2px #f3f3f3 solid;
            padding-bottom: 10px;
            margin-bottom: 10px;
            &:last-child {
                border: none;
            }
            .costom-info {
                height: 40px;
                display: flex;
                align-items: center;
                font-size: 14px;
                border-bottom: 1px solid #f4f4f4;
                &:last-child {
                    border: none;
                }
                .title {
                    width: 90px;
                }
                .data {
                    color: #797979;
                    &.color-g {
                        color: #23c064;
                    }
                    &.color-r {
                        color: #fa5757;
                    }
                }
            }
        }
    }
}
</style>